<template>
    <div style="display: inline-block;">
        <el-form-item :label="label">
            <el-form-item prop="typeSelect" class="mgb0">
                <el-select v-model="typeSelect" style="width: 130px;margin-right: 15px;" @change="getTypeList(2)">
                    <el-option
                        v-for="item in typeList"
                        :key="item.categoryCode"
                        :label="item.categoryName"
                        :value="item.categoryCode">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="typeSelect2" class="mgb0">
                <el-select v-model="typeSelect2" style="width: 130px;margin-right: 15px;">
                    <el-option
                        v-for="item in typeList2"
                        :key="item.categoryCode"
                        :label="item.categoryName"
                        :value="item.categoryCode">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form-item>
    </div>
</template>

<script>
    export default {
        props:['label'],
        data() {
            return {
                typeList : [{
                    categoryCode: '',
                    categoryName: '全部'
                }],
                typeSelect: '',
                typeList2 : [{
                    categoryCode: '',
                    categoryName: '全部'
                }],
                typeSelect2: ''
            }
        },
        created(){
            this.getTypeList(1);   //获取一级分类数据
        },
        methods: {
            reset(){
                this.typeSelect = '';
                this.typeSelect2 = '';
                this.typeList2 = [{
                    categoryCode: '',
                    categoryName: '全部'
                }];
            },
            getTypeList(state){
                const allOption = {
                    categoryCode: '',
                    categoryName: '全部'
                }
                this.$axios
                    .post("/admin/category/getItemsCategoryList.json",{
                        categoryCode: state == 1 ? '' : this.typeSelect
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            if(state == 1){    //获取一级菜单
                                this.typeList = [allOption, ...data.list];
                            }else if(state == 2){     //获取二级菜单
                                this.typeSelect2 = '';  //初始化二级菜单选择
                                if(this.typeSelect == ''){
                                    this.typeList2 = [allOption];
                                }else{
                                    this.typeList2 = [allOption, ...data.list];
                                }
                            }
                        }else{
                            this.$message.error(data.message);
                        }
                    })
            }
        }
    }

</script>